<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业三表格数据的维护升级版</title>
	</head>
	<body>
		<div>纪录列表
			<br><br>姓名：<input type="text" />
			<br><br>性别：<input type="radio" value="男"/>男
			             <input type="radio" value="女"/>女
						
			<br><br>			 
			爱好：<input type="checkbox" name='check' value="跑步" />跑步
			      <input type="checkbox" name='check' value="看书" />看书
			      <input type="checkbox" name='check' value="游泳" />游泳
			<br><br>
			地址：<select id="selid">
				      <option value="北京">北京</option>
					  <option value="上海">上海</option>
					  <option value="深圳">深圳</option>
			     </select>
			<br><br>
			<button onclick="testadd()">添加</button>
			<br><br>
			姓名：<input type="text" placeholder="姓名" />
			地址：<select  id='selid2'>
				      <option value="北京">北京</option>
					  <option value="上海">上海</option>
					  <option value="深圳">深圳</option>
			     </select>
			<button onclick="testselect()">搜索</button><br><br>
			<table style="border: 1px solid black; width: 600px;">
				<thead>
					<tr>
						<th style="width:10%;text-align: center;">ID</th>
						<th style="width:10%;text-align: left;">姓名</th>
						<th style="width:10%;text-align: left;">性别</th>
						<th style="width:25%;text-align: left ;">爱好</th>
						<th style="width:20%;text-align: left ;">地址</th>
						<th style="width:25%;text-align: left ;">操作</th>
					</tr>
				</thead>
				<tbody id="tbody"></tbody>
			</table>
		</div>
		
		<script type="text/javascript">
			//获取收入框里面的数据
			//可以根据标签名TagName，来找寻input标签构成的dom对象，组合成的数组
			//inputs中包含三个元素
			var inputs=document.getElementsByTagName("input");
			var myselect=document.getElementById("selid");
		
			var id=1;
			function testadd(){
				//input输入的内容直接  .value就可以获取出来
				var i0=inputs[0].value;//姓名
				var i1='';//性别
				for(var i=1;i<=2;i++){
					if(inputs[i].checked){
						i1=inputs[i].value;
					}
				}
				var i2='';
				for(var i=3;i<=5;i++){
					if(inputs[i].checked){
						i2+=inputs[i].value;
					}
				}
				var index=myselect.selectedIndex; //selectedIndex代表你所选中项的index 
				var i3=myselect.options[index].value;
											
				var html=""
				+"<tr>"
				+"<td>"+ id++ +"</td>"
				+"<td>"+ i0 +"</td>"
				+"<td>"+ i1 +"</td>"
				+"<td>"+ i2 +"</td>"
				+"<td>"+ i3 +"</td>"
				+"<td><a href='javascript:;' onclick='testdel(this)'>删除</a>  <a href='javascript:;' onclick='testupd(this)'>修改</a></td>"
				+"</tr>"	
				var tbody=document.getElementById("tbody");
				tbody.innerHTML += html;
			}
			
			function testdel(obj){
				//指定的一行记录删掉
				//obj是<a>标签所对应的dom对象；parentNode上一级节点
				//<a>标签的上一及是<td>,<td>的上一级是<tr>--obj.parentNode.parentNode;
				//通过标签的关系来找
				var tr=obj.parentNode.parentNode;
				if(confirm("是否删除该行记录？")){
					document.getElementById("tbody").removeChild(tr);
			    }
			}
			
			function testupd(obj){
				//找
				var tdthis = obj.parentNode;
				var tdaddress =  tdthis.previousSibling;//age所在的td
				var tdhobby = tdaddress.previousSibling;
				var tdsex = tdhobby.previousSibling;
				var tdname = tdsex.previousSibling;
				var tdid = tdname.previousSibling;
				//找到之后修改里面的内容
				
				tdaddress.innerHTML="<input type='text' id='tAddress"+tdid+"' value='"+tdaddress.innerHTML+"'/>"
				tdhobby.innerHTML="<input type='text' id='tHobby"+tdid+"' value='"+tdhobby.innerHTML+"'/>"
				tdsex.innerHTML="<input type='text' id='tSex"+tdid+"' value='"+tdsex.innerHTML+"'/>"
				tdname.innerHTML="<input type='text' id='tName"+tdid+"' value='"+tdname.innerHTML+"'/>"
				tdthis.innerHTML="<a href='javascript:;'>保存</a>"
				tdthis.getElementsByTagName("a")[0].onclick=function(){
					tdaddress.innerHTML=document.getElementById('tAddress'+tdid).value;
					tdhobby.innerHTML=document.getElementById('tHobby'+tdid).value;
					tdsex.innerHTML=document.getElementById('tSex'+tdid).value;
					tdname.innerHTML=document.getElementById('tName'+tdid).value;
					tdthis.innerHTML="<a href='javascript:;' onclick='testdel(this)'>删除</a>  <a href='javascript:;' onclick='testupd(this)'>修改</a>"				    
				}
			}
			var myselect2=document.getElementById("selid2");
			function testselect(){
				var trs=document.getElementsByTagName("tr");//表格中的数据都放在tr里
				var len=trs.length;
				for(var i=1;i<len;i++){
					trs[i].removeAttribute("style");//把对应的样式去掉
				}
				var i6=inputs[6].value;
				if(i6!=''){
					for(var i=1;i<len;i++){//遍历tr  第一行tr 不用遍历
					    var tname=trs[i].cells[1].innerHTML;
						//姓名这一列
						if(tname.indexOf(i6)>-1){//模糊匹配
							trs[i].style.backgroundColor='greenyellow';
						}	
					}
				}
				var index2=myselect2.selectedIndex; //selectedIndex代表你所选中项的index
				var i4=myselect2.options[index2].value;
				if(i4!=''){
					for(var i=1;i<len;i++){//遍历tr  第一行tr 不用遍历
					    var taddress=trs[i].cells[4].innerHTML;
						//姓名这一列
						if(taddress.indexOf(i4)>-1){//模糊匹配
							trs[i].style.backgroundColor='greenyellow';
						}	
					}
				}
				
				
				
			}
			
			
		</script>
	</body>
</html>
